<!-- 管理员:课程考核管理:题库和在线考试管理:试题库管理:课程下的试题列表 -->
<template>
  <div style="width:100% !important;">

    <div class="buttons-container-1">
      <el-button @click="onCreateQuestionClickHandler()"
                 size="mini"
                 type="warning"
                 icon="el-icon-circle-plus-outline"
                 style="width:100px;">新增试题</el-button>
      <!-- <el-button @click="onImportQuestionsClickHandler()"
                 size="mini"
                 type="warning"
                 icon="el-icon-circle-plus-outline"
                 style="width:140px;">从模板导入试题</el-button> -->
      <el-button @click="onDeleteQuestionClickHandler()"
                 size="mini"
                 type="danger"
                 icon="el-icon-delete"
                 style="width:100px;">删除试题</el-button>
    </div>
    <el-container>
      <el-main>
        <el-table :data="tableData"
                  border
                  class="xpaas-table-class"
                  row-class-name="xpaas-row-class"
                  cell-class-name="xpaas-cell-class"
                  header-row-class-name="xpaas-header-row-class"
                  header-cell-class-name="xpaas-header-cell-class"
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection"
                           width="207"
                           align="center"></el-table-column>
          <el-table-column label="序号"
                           type="index"
                           align="center"
                           width="207">

          </el-table-column>
          <el-table-column prop="guideitemrank"
                           label="操作"
                           align="center"
                           width="207">
            <template slot-scope="scope">
              <div class="buttons-container-2">
                <el-button @click="onReviewQuestionClickHandler(scope.row)"
                           size="mini"
                           type="primary"
                           icon="el-icon-document">详情</el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="sttg"
                           label="课程标题"
                           width="207"
                           align="center"></el-table-column>
          <el-table-column prop="createUser"
                           width="206"
                           label="作者"
                           align="center"></el-table-column>
          <el-table-column prop="stndz"
                           width="206"
                           label="难度"
                           align="center"></el-table-column>
          <el-table-column prop="stzj"
                           width="207"
                           label="章节"
                           align="center"></el-table-column>
          <el-table-column prop="txlx"
                           width="207"
                           label="题型"
                           align="center">
            <template slot-scope="scope">
              {{scope.row.txlx|txlx}}
            </template>
          </el-table-column>
          <el-table-column prop="khdfs"
                           label="分数"
                           align="center">
            <template slot-scope="scope">
              {{scope.row.khdfs|fs}}
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
    <!-- <div style="margin:2vh 0 1vh 0;">
      <el-button @click="onCreateAutoClickHandler()"
                 size="mini"
                 type="primary"
                 icon="el-icon-tickets"
                 style="width:100px;">智能组卷</el-button>
      <el-button @click="onCreateExaminationClickHandler()"
                 size="mini"
                 type="primary"
                 icon="el-icon-tickets"
                 style="width:100px;">生成试卷</el-button>
    </div> -->
    <div class="search-result-desc-panel">
      <span>共找到 {{ searchResultPagin.totalCount }} 条记录，当前显示 {{
          (searchResultPagin.totalCount > 0) ? ((searchResultPagin.currentPage - 1) * searchResultPagin.perpageCount + 1) : (0)
          }} - {{
          ( searchResultPagin.totalCount-searchResultPagin.perpageCount> 0) ? (searchResultPagin.currentPage * searchResultPagin.perpageCount) : (searchResultPagin.totalCount)
          }} 条记录。</span>
    </div>
    <div class="search-result-pagin-panel">
      <el-pagination @size-change="onPerpageSizeChangeHandler"
                     @current-change="onCurrentPageNoChangeHandler"
                     :current-page="searchResultPagin.currentPage"
                     :page-sizes="[10, 20, 30, 50]"
                     :page-size="searchResultPagin.perpageCount"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="searchResultPagin.totalCount">
      </el-pagination>
    </div>
    <el-dialog :title="questionDialog.dialogTitle"
               v-if="questionDialog.dialogFormVisible"
               :visible.sync="questionDialog.dialogFormVisible"
               :close-on-click-modal=false
               :show-close=true
               :center=true
               :close-on-press-escape=false
               width="75%"
               top="1%"
               custom-class="newzhnDialog">
      <el-container>
        <el-main>
          <el-row>
            <el-button @click="onQuestionTypeChangeHandler('单选题',1)"
                       id="id_questionType_单选题"
                       class="button_class_questionType">单选题</el-button>
            <el-button @click="onQuestionTypeChangeHandler('多选题',2)"
                       id="id_questionType_多选题"
                       class="button_class_questionType">多选题</el-button>
            <el-button @click="onQuestionTypeChangeHandler('填空题',3)"
                       id="id_questionType_填空题"
                       class="button_class_questionType">填空题</el-button>
            <el-button @click="onQuestionTypeChangeHandler('判断题',4)"
                       id="id_questionType_判断题"
                       class="button_class_questionType">判断题</el-button>
            <el-button @click="onQuestionTypeChangeHandler('简答题',5)"
                       id="id_questionType_简答题"
                       class="button_class_questionType">简答题</el-button>
            <el-button @click="onQuestionTypeChangeHandler('论述题',6)"
                       id="id_questionType_论述题"
                       class="button_class_questionType">论述题</el-button>
            <!-- 
            <el-button v-for="(item,index) in questiontype"
                       :key="index"
                       @click="onQuestionTypeChangeHandler(item.txmc,item.txlx)">{{item.txmc}}</el-button> -->
          </el-row>
        </el-main>
      </el-container>
      <el-card style="margin:10px 0px;"
               shadow="always">
        <el-container style="height:58vh;overflow:auto;">
          <el-main>
            <el-row>
              <question-singleChoice :visible.sync="questionDialog.visibleSingleChoice"
                                     :kcbm='shiTKdata.kcbm'
                                     :kcmc='shiTKdata.kcmc'
                                     :Textshow='Textshow1'
                                     @dxtdata="dxtdata" />
            </el-row>
            <el-row>
              <question-multipleChoice :visible.sync="questionDialog.visibleMultipleChoice"
                                       :wipedata='wipedata'
                                       :kcbm='shiTKdata.kcbm'
                                       :kcmc='shiTKdata.kcmc'
                                       :Textshow='Textshow2'
                                       @dxtdata="dxtdata" />
            </el-row>
            <el-row>
              <question-completion :visible.sync="questionDialog.visibleCompletion"
                                   :kcbm='shiTKdata.kcbm'
                                   :kcmc='shiTKdata.kcmc'
                                   :Textshow='Textshow3'
                                   @dxtdata="dxtdata" />
            </el-row>
            <el-row>
              <question-judgment :visible.sync="questionDialog.visibleJudgment"
                                 :kcbm='shiTKdata.kcbm'
                                 :kcmc='shiTKdata.kcmc'
                                 :Textshow='Textshow4'
                                 @dxtdata="dxtdata" />
            </el-row>
            <el-row>
              <question-shortEssay :visible.sync="questionDialog.visibleShortEssay"
                                   :kcbm='shiTKdata.kcbm'
                                   :kcmc='shiTKdata.kcmc'
                                   :Textshow='Textshow5'
                                   @dxtdata="dxtdata" />
            </el-row>
            <el-row>
              <question-longEssay :visible.sync="questionDialog.visibleLongEssay"
                                  :kcbm='shiTKdata.kcbm'
                                  :kcmc='shiTKdata.kcmc'
                                  :Textshow='Textshow6'
                                  @dxtdata="dxtdata" />
            </el-row>
          </el-main>
        </el-container>
      </el-card>
      <div slot="footer">
        <el-button type="warning"
                   @click="baocun">保存</el-button>
        <span style="display:inline-block;width:60px;"></span>
        <el-button type="danger"
                   @click="questionDialog.dialogFormVisible = false">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="reviewQuestionDialog.dialogTitle"
               :visible.sync="reviewQuestionDialog.dialogVisible"
               :close-on-click-modal=false
               :show-close=true
               :center=true
               :close-on-press-escape=true
               width="75%"
               top="1%"
               custom-class="reviewQuestionDialog">
      <question-review :reviewbind=reviewbind
                       :kcbm='shiTKdata.kcbm' />
    </el-dialog>
    <el-dialog :title="autoGenerateExaminationDialog.dialogTitle"
               :visible.sync="autoGenerateExaminationDialog.dialogVisible"
               :close-on-click-modal=false
               :show-close=true
               :center=true
               :close-on-press-escape=true
               custom-class="autoGenerateExaminationDialog">

      <el-container>
        <el-main>
          <el-col :span="1"><span>&nbsp;</span></el-col>
          <el-col :span="21">
            <el-form>
              <div class="el-table dialogFormTableBorder">
                <table class="dialogFormTable">
                  <tr>
                    <td class="formLabel">难度</td>
                    <td class="formItem">
                      <el-checkbox-group v-model="zhiNZJ.difficulty"
                                         size="mini">
                        <el-checkbox label="简单"
                                     style="border:1px solid #004ca7;"
                                     border></el-checkbox>
                        <el-checkbox label="一般"
                                     style="border:1px solid #004ca7;"
                                     border></el-checkbox>
                        <el-checkbox label="很难"
                                     style="border:1px solid #004ca7;"
                                     border></el-checkbox>
                        <el-checkbox label="较难"
                                     style="border:1px solid #004ca7;"
                                     border></el-checkbox>
                        <el-checkbox label="非常难"
                                     style="border:1px solid #004ca7;"
                                     border></el-checkbox>
                      </el-checkbox-group>
                    </td>
                  </tr>
                  <tr class="Questiontr">
                    <td class="formLabel">题型</td>
                    <td class="formItem tixingbox">
                      <div class="formItemdiv tixingchind">
                        <div class="formLabel txlb">题型列表</div>
                        <div>
                          <el-radio-group v-model="zhiNZJ.Question">
                            <el-radio :label="1"
                                      class="myradio"
                                      size="mini"
                                      style="border:1px solid #004ca7;padding:5px;border-radius:5px;background-color:#ebf5ff;">单选题 {{zhiNZJ.dx}}道</el-radio>
                            <el-radio :label="2"
                                      class="myradio"
                                      size="mini"
                                      style="border:1px solid #004ca7;padding:5px;border-radius:5px;background-color:#ebf5ff;">多选题 {{zhiNZJ.duox}}道</el-radio>
                            <el-radio :label="3"
                                      class="myradio"
                                      size="mini"
                                      style="border:1px solid #004ca7;padding:5px;border-radius:5px;background-color:#ebf5ff;">填空题 {{zhiNZJ.tk}}道</el-radio>
                            <el-radio :label="4"
                                      class="myradio"
                                      size="mini"
                                      style="border:1px solid #004ca7;padding:5px;border-radius:5px;background-color:#ebf5ff;">判断题 {{zhiNZJ.pd}}道</el-radio>
                            <el-radio :label="5"
                                      class="myradio"
                                      size="mini"
                                      style="border:1px solid #004ca7;padding:5px;border-radius:5px;background-color:#ebf5ff;">简答题 {{zhiNZJ.jd}}道</el-radio>
                            <el-radio :label="6"
                                      class="myradio"
                                      size="mini"
                                      style="border:1px solid #004ca7;padding:5px;border-radius:5px;background-color:#ebf5ff;">论述题 {{zhiNZJ.ls}}道</el-radio>
                          </el-radio-group>
                        </div>
                        <div>
                          <el-button type="primary"
                                     icon="el-icon-plus"
                                     class="mybuttom"
                                     circle></el-button><br />
                          <el-button type="primary"
                                     class="mybuttom"
                                     icon="el-icon-delete"
                                     circle></el-button><br />
                          <el-button type="primary"
                                     class="mybuttom"
                                     icon="el-icon-arrow-up"
                                     circle></el-button><br />
                          <el-button type="primary"
                                     class="mybuttom"
                                     icon="el-icon-arrow-down"
                                     circle></el-button>
                        </div>
                      </div>
                    </td>
                  </tr>
                </table>
              </div>
            </el-form>
          </el-col>
          <el-col :span="1"><span>&nbsp;</span></el-col>
        </el-main>
      </el-container>
      <div slot="footer">
        <el-button plain
                   type="warning"
                   @click="autoGenerateExaminationDialog.dialogVisible = false">保存</el-button>
        <el-button plain
                   type="danger"
                   @click="autoGenerateExaminationDialog.dialogVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getlistPage,
  getlistById,
  setaddlist,
  gettestlist,
  scttestremove,
  getquestiontypeall,
} from '@/api/examinations/gitlist'
import { Message } from 'element-ui'
import mymsg from '@/api/msg.js'
import QuestionSingleChoice from './questionSingleChoice'
import QuestionMultipleChoice from './questionMultipleChoice'
import QuestionCompletion from './questionCompletion'
import QuestionJudgment from './questionJudgment'
import QuestionShortEssay from './questionShortEssay'
import QuestionLongEssay from './questionLongEssay'
import QuestionReview from './questionReview'
export default {
  components: {
    'question-singleChoice': QuestionSingleChoice,
    'question-multipleChoice': QuestionMultipleChoice,
    'question-completion': QuestionCompletion,
    'question-judgment': QuestionJudgment,
    'question-shortEssay': QuestionShortEssay,
    'question-longEssay': QuestionLongEssay,
    'question-review': QuestionReview,
  },
  filters: {
    txlx(value) {
      let x
      switch (true) {
        case value == -1:
          x = '未定义'

          break
        case value == 1:
          x = '单选题'

          break
        case value == 2:
          x = '多选题'

          break
        case value == 3:
          x = '填空题'

          break
        case value == 4:
          x = '判断题'

          break
        case value == 5:
          x = '简答题'

          break
        case value == 6:
          x = '论述题'

          break

        default:
          break
      }
      return x
    },
    fs(value) {
      let x = value
      x = value.split('*-*-*').join('')
      return x
    },
  },
  data() {
    return {
      txmc: '',
      txlx: '',
      Changetrue: [],
      //控制子组件传值
      Textshow1: false,
      Textshow2: false,
      Textshow3: false,
      Textshow4: false,
      Textshow5: false,
      Textshow6: false,

      DXTdata: '',
      shiTKdata: {},
      id: '',
      zhiNZJ: {
        Question: '',
        difficulty: [],
        dx: 1,
        duox: 2,
        tk: 3,
        pd: 3,
        ls: 1,
        jd: 2,
      },
      //智能组题
      zhnDialog: {},
      searchResultPagin: {
        totalCount: 1000,
        perpageCount: 10,
        currentPage: 1,
        currentStart: 31,
        currentEnd: 40,
      },
      autoGenerateExaminationDialog: {
        dialogTitle: '',
        dialogVisible: false,
      },
      reviewQuestionDialog: {
        dialogTitle: '',
        dialogVisible: false,
      },
      questionDialog: {
        dialogTitle: '智能组卷',
        questionType: '',
        dialogFormVisible: false,
        theChapterChoiceDialogVisible: false,
        visibleSingleChoice: false,
        visibleMultipleChoice: false,
        visibleCompletion: false,
        visibleJudgment: false,
        visibleShortEssay: false,
        visibleLongEssay: false,
      },
      tableData: [{}, {}],
      questiontype: [],
      //全部题型
    }
  },
  created() {
    console.log(this.$route.query.id)
    this.id = this.$route.query.id
    getlistById(this.id).then((res) => {
      this.shiTKdata = res.data.data
    })
    getquestiontypeall().then((res) => {
      this.questiontype = res.data.data.slice(5)
      console.log(this.questiontype)
    })
    getlistPage(this.id).then((res) => {
      this.tableData = res.data.data
      this.searchResultPagin.totalCount = this.tableData.length
    })
  },
  methods: {
    handleSelectionChange(x) {
      console.log(x)
      this.Changetrue = x
    },
    gettestlist() {
      gettestlist(
        this.searchResultPagin.currentPage,
        this.searchResultPagin.perpageCount,
        this.id
      ).then((res) => (this.tableData = res.data.data.records))
    },
    dxtdata(e) {
      let that = this
      this.DXTdata = e
      this.DXTdata.stkid = this.id
      this.DXTdata.txlx = this.txlx
      this.DXTdata.txmc = this.txmc
      console.log(this.DXTdata, '子组件的智')
      setaddlist(this.DXTdata).then((res) => {
        mymsg('添加', res)
        that.gettestlist()
      })
    },
    baocun() {
      switch (true) {
        case this.txlx == 1:
          this.Textshow1 = !this.Textshow1
          break
        case this.txlx == 2:
          this.Textshow2 = !this.Textshow2
          break
        case this.txlx == 3:
          this.Textshow3 = !this.Textshow3
          break
        case this.txlx == 4:
          this.Textshow4 = !this.Textshow4
          break
        case this.txlx == 5:
          this.Textshow5 = !this.Textshow5
          break
        case this.txlx == 6:
          this.Textshow6 = !this.Textshow6
          break
        default:
          alert(35465)
          break
      }
      setTimeout(() => {
        this.questionDialog.dialogFormVisible = false
      }, 200)
    },
    onCreateQuestionClickHandler() {
      this.questionDialog.dialogTitle = '新增试题'
      this.questionDialog.dialogFormVisible = true
      this.wipedata = !this.wipedata
    },
    onPerpageSizeChangeHandler: function (pPageSize) {
      this.searchResultPagin.perpageCount = pPageSize
      this.gettestlist()
    },
    onCurrentPageNoChangeHandler: function (pPageNo) {
      this.searchResultPagin.currentPage = pPageNo
      this.gettestlist()
    },
    onImportQuestionsClickHandler() {
      Message({
        message: '从模板导入试题',
        type: 'error',
      })
    },
    onDeleteQuestionClickHandler() {
      this.Changetrue.forEach((e) => {
        scttestremove(e.id).then((res) => {
          mymsg('删除', res)
          this.gettestlist()
        })
      })
    },
    onReviewQuestionClickHandler(x) {
      this.reviewQuestionDialog.dialogTitle = '试题详情'
      this.reviewbind = x
      console.log(x)
      this.reviewQuestionDialog.dialogVisible = true
    },
    onCreateAutoClickHandler() {
      this.autoGenerateExaminationDialog.dialogTitle = '智能组卷'
      this.autoGenerateExaminationDialog.dialogVisible = true
    },
    onCreateExaminationClickHandler() {
      Message({
        message: '生成试卷',
        type: 'error',
      })
    },
    resetQuestionTypeButtons() {
      document.getElementById('id_questionType_单选题').style.backgroundColor =
        '#ecf5ff'
      document.getElementById('id_questionType_单选题').style.color = '#409eff'
      document.getElementById('id_questionType_多选题').style.backgroundColor =
        '#ecf5ff'
      document.getElementById('id_questionType_多选题').style.color = '#409eff'
      document.getElementById('id_questionType_填空题').style.backgroundColor =
        '#ecf5ff'
      document.getElementById('id_questionType_填空题').style.color = '#409eff'
      document.getElementById('id_questionType_判断题').style.backgroundColor =
        '#ecf5ff'
      document.getElementById('id_questionType_判断题').style.color = '#409eff'
      document.getElementById('id_questionType_简答题').style.backgroundColor =
        '#ecf5ff'
      document.getElementById('id_questionType_简答题').style.color = '#409eff'
      document.getElementById('id_questionType_论述题').style.backgroundColor =
        '#ecf5ff'
      document.getElementById('id_questionType_论述题').style.color = '#409eff'
      //   document.getElementById('id_questionType_自定义').style.backgroundColor =
      //     '#ecf5ff'
      //   document.getElementById('id_questionType_自定义').style.color = '#409eff'
    },
    onQuestionTypeChangeHandler(val, num) {
      this.txlx = num
      this.txmc = val
      this.questionDialog.questionType = num
      Message({
        message: val,
        type: 'error',
      })
      this.questionDialog.visibleSingleChoice = false
      this.questionDialog.visibleMultipleChoice = false
      this.questionDialog.visibleCompletion = false
      this.questionDialog.visibleJudgment = false
      this.questionDialog.visibleShortEssay = false
      this.questionDialog.visibleLongEssay = false

      this.resetQuestionTypeButtons()
      document.getElementById('id_questionType_' + val).style.backgroundColor =
        '#409eff'
      document.getElementById('id_questionType_' + val).style.color = '#ffffff'
      switch (this.questionDialog.questionType) {
        case 1:
          this.questionDialog.visibleSingleChoice = true
          break
        case 2:
          this.questionDialog.visibleMultipleChoice = true
          break
        case 3:
          this.questionDialog.visibleCompletion = true
          break
        case 4:
          this.questionDialog.visibleJudgment = true
          break
        case 5:
          this.questionDialog.visibleShortEssay = true
          break
        case 6:
          this.questionDialog.visibleLongEssay = true
          break
        default:
          this.questionDialog.visibleSingleChoice = false
          this.questionDialog.visibleMultipleChoice = false
          this.questionDialog.visibleCompletion = false
          this.questionDialog.visibleJudgment = false
          this.questionDialog.visibleShortEssay = false
          this.questionDialog.visibleLongEssay = false
          break
      }
    },
  },
}
</script>

<style lang="less" scoped>
.el-dialog__wrapper {
  > ::v-deep .newzhnDialog {
    height: 90%;
  }
  > ::v-deep .reviewQuestionDialog {
    height: 90%;
  }
}
</style>

<style lang="less" scoped>
@import '../../courseAssessmentScoped.less';
@import '../../exportBtn.less';
.mybuttom {
  margin: 5px 0;
}

.myradio {
  margin: 10px 0;
}
.search-result-pagin-panel {
  text-align: right;
}
.search-result-desc-panel {
  font-size: 14px;
  font-weidth: normal;
  font-family: @fontFamily;
  color: #004ca7;
  margin: 15px 0 0 0;
}
.el-pagination {
  color: red;
  ::v-deep > .el-pagination__total {
    color: #004ca7;
  }
}
.Questiontr {
  height: 300px;
}
.buttons-container-1 {
  line-height: 38px;
  text-align: left;
  margin: 0 0 2vh 0;
}
.buttons-container-1 > button.el-button {
  height: 28px;
}
.buttons-container-1 > button.el-button:hover {
  color: #ffffff;
}
.buttons-container-2 {
  line-height: 38px;
  margin: 0px 10px;
  text-align: center;
}
.button_class_questionType {
  background-color: #ecf5ff;
  color: #409eff;
}
.myimg {
  margin-right: 3px;
}

.search-result-desc-panel {
  font-size: 14px;
  font-weidth: normal;
  font-family: @fontFamily;
  color: #004ca7;
  margin: 15px 0 0 0;
}
.buttons-container-1 {
  width: 440px;
  line-height: 38px;
  margin: 0px 10px;
  text-align: center;
}
.search-result-pagin-panel {
  text-align: right;
}
.buttons-container-1 > button.el-button {
  margin: 0px 10px;
  height: 28px;
}
div.dialogFormTableBorder {
  border: 1px solid #004ca7;
  border-radius: 9px;
  border-spacing: 1;
}
table.dialogFormTable {
  width: 100%;
  background-color: yellow;
}
table.dialogFormTable td.formLabel {
  width: 17%;
  line-height: 60px;
  background-color: #ecf2fb;
  color: #004ca7;
  font-size: 16px;
  font-weight: bold;
  font-family: 'Microsoft YaHei';
  text-align: center;
  padding: 0px 20px;
}
table.dialogFormTable td.formItem {
  width: 60%;
  line-height: 38px;
  background-color: #ffffff;
  color: #004ca7;
  text-align: left;
  padding: 0px 20px;
}
table.dialogFormTable td {
  border-spacing: 1;
  border-right: 1px solid #004ca7;
  border-bottom: 1px solid #004ca7;
}
.addzijied {
  margin: 10px;
}
.formItemdiv {
  height: 200px;
  display: flex;
}
.formItemdiv div {
  flex: 1;
}
.formItemdiv div:nth-child(2) {
  flex: 2;
  border-spacing: 1;

  > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    > label {
      width: 150px;
    }
  }
}
.txlb {
  text-align: center;
}
.el-checkbox-group {
  text-align: center;
  line-height: 0px;
}
.tixingbox {
  position: relative;
}
.tixingchind {
  width: 580px;
  position: absolute;
  top: 7%;
  left: 50%;
  margin-left: -290px;
}
.formItemdiv div:nth-child(3) {
}
</style>